<template>
    <div class="home" v-zy-loading="loading">
        <van-search v-model="value" shape="round" input-align="center" placeholder="搜索学生姓名" @input="onSearch"></van-search>

        <div class="request-list" v-if="dataList.length > 0">
            <div class="request-item flex-row-sb" v-for="item in dataList" :key="item.id">
                <div class="left flex-col">
                    <span class="name">{{ item.studentName }}</span>
                    <span class="day-num">
                        请假时长：
                        <span :style="{ color: varCss.color }">{{ $util.getDays(item.startHoliday, item.endHoliday) }}</span>
                    </span>
                    <span class="day-num">开始时间：{{ item.startHoliday }}</span>
                    <span class="day-num">结束时间：{{ item.endHoliday }}</span>
                    <span class="day-num" v-if="item.approveStatus === 0">提交时间：{{ item.applyTime }}</span>
                    <span class="day-num" v-else>审核时间：{{ item.updateTime }}</span>
                    <span class="day-num del-span" style="display: block; width: 100%; line-height: 25px">请假原因：{{ item.applyReason }}</span>
                </div>
                <div class="right flex-col-sb-c" :style="{ color: colors[item.approveStatus] }">
                    <span>{{ item.approveStatus | filterApproveStatus }}</span>
                </div>
            </div>
        </div>

        <van-empty image="search" description="没有该学生的请假记录~~" v-else />
    </div>
</template>

<script>
let recordList = []
export default {
    data() {
        return {
            value: '',
            loading: false,
            dataList: [],
        }
    },
    created() {
        this.getLeaveList()
    },
    computed: {
        colors() {
            return ['', '#6DB6FF', '#F3705A']
        },
    },
    methods: {
        async getLeaveList() {
            let { code, data } = await this.$api.studentLeave.leaveList.getStudentApproveList({
                page: 1, //查询页码
                limit: 9999, //查询条数
                approveStatus: '1', //审核通过
                schoolId: 11,
                startTime: this.$util.curentTime() + '' + '00:00:00',
            })

            if (code === 200) {
                this.loading = false
                this.dataList = data.records
                recordList = JSON.parse(JSON.stringify(data.records))
            }
        },

        onSearch() {
            this.dataList = recordList.filter((v) => {
                return v.studentName.match(this.value)
            })
        },
    },
    filters: {
        // 审核类型
        filterApproveStatus: (value) =>
            ({
                0: '待审核',
                1: '已通过',
                2: '已驳回',
            }[value] || '其他'),
    },
}
</script>

<style lang="scss" scoped>
$errColor: #f3705a;
.home {
    padding: 10px 20px;

    .request-list {
        .request-item {
            padding: 10px 12px;
            min-height: 71px;
            border-top: 1px solid #eeeeee;
            border: 1px solid #f2f2f2;
            position: relative;
            margin-bottom: 15px;

            .left {
                font-size: 14px;

                .name {
                    color: #333333;
                }

                .day-num {
                    margin-top: 6px;
                    color: #999999;
                }
            }

            .right {
                color: #415a6b;
                font-size: 13px;
                position: absolute;
                top: 30px;
                right: 30px;
            }
        }
    }
}
</style>
